<!--复选框-->
<template>
  <div class="example tableClass">
    <zz-searchAd
      :searchCom="searchCom"
      :width="230"
      holder='搜索加密锁号'
      @search="search"
      @handle="handle"
      @confirmInput="searchConfirm"
      @confirm = 'getMyLockdogList'>
    </zz-searchAd>

    <table cellspacing="0">
      <tr>
        <th>1) 调用文件组件</th>
      </tr>
      <tr>
        <td><pre>{{explameCall}}</pre></td>
      </tr>
      <tr>
        <th>2) searchCom具体格式</th>
      </tr>
      <tr>
        <td><pre>{{explameSearchCom}}</pre></td>
      </tr>
      <tr>
        <th>3) searchCom完整的栗子</th>
      </tr>
      <tr>
        <td><pre>{{explameMethodsAll}}</pre></td>
      </tr>
      <tr>
        <th>4) 写入到methods方法</th>
      </tr>
      <tr>
        <td><pre>{{explameMethods}}</pre></td>
      </tr>
    </table>

  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        searchCom: [
          {name: '下拉框:', type: 'select', query: 'authorizeType', width: 33.3, titleW: 80, selectPlace: '全部', selectOption: {1: '未授权', 2: '预授权', 3: '销售预授权', 4: '正式授权'}},
          {name: '模糊搜索:', type: 'auto', query: 'modifyName', width: 33.3, titleW: 80, label: '需要显示的字段', from: '传给服务端的参数', constant: '可以再传一个参数', url: '接口'},
          {name: '自定义弹窗:', type: 'plus', query: 'modifyName', width: 33.3, titleW: 80},
          {name: '选人组件:', type: 'retrieve', rId: 'retrieve', width: 33.3, titleW: 80},
          {name: '省市区:', type: 'area', rId: 'retrieve', width: 33.3, titleW: 80},
          {name: '选择部门:', type: 'department', rId: 'department', width: 33.3, titleW: 80},
          {name: '复选框:', type: 'department', rId: 'department', width: 33.3, titleW: 80},
          {name: '操作日期:', type: 'dateScope', children: [{query: 'startGmtModify'}, {query: 'endGmtModify'}], width: 33.3, titleW: 85},
          {name: '项目地址', type: 'check', rId: 'retrieve', width: 33.3, titleW: 80}
        ],
        state: '',
        stateData: '',
        valueData: {id: 1},
        checkEd: true,
        explameMethodsAll: `
        [
          {name: '下拉框', type: 'select', width: 33.3, query: 'encryptDogStatus', titleW: 80, selectPlace: '全部', selectOption: {1: '在库', 2: '领用', 3: '已售', 4: '外借', 5: '换回', 6: '注销'}},
          {name: '模糊搜索:', type: 'auto', query: 'modifyName', width: 33.3, titleW: 80, label: '需要显示的字段', from: '传给服务端的参数', constant: '可以再传一个参数', url: '接口'},
          {name: '自定义弹窗:', type: 'plus', query: 'modifyName', width: 33.3, titleW: 80},
          {name: '选人组件:', type: 'retrieve', rId: 'retrieve', width: 33.3, titleW: 80},
          {name: '省市区:', type: 'area', rId: 'retrieve', width: 33.3, titleW: 80},
          {name: '选择部门:', type: 'department', rId: 'department', width: 33.3, titleW: 80},
          {name: '操作日期:', type: 'dateScope', children: [{query: 'startGmtModify'}, {query: 'endGmtModify'}], width: 33.3, titleW: 85}
        ]
        `,
        explameSearchCom: `
          [
            {
               name: '搜索条件的名字',
               type: '搜索条件的类型' select下拉框 dateScope日期 input输入框 plus 自定义弹窗 auto模糊搜索 retrieve选人组件  department选择部门  area省市区 moneyScope金钱
               width: '搜索的条件的宽度',
               titleW: '标题的宽度',
               query: '在父组件定义好要传给后端的参数',
            }
          ]
        `,
        explameCall: `<zz-searchAd
          searchCom="[]" 搜索的条件，下有案例
          :width="230"  简单搜索框的样式
          :alwaysOpen=true  只展示高级搜索模式
          holder="搜索加密锁号"  简单搜索框的默认显示的提示语
          @search= "search"  高级搜索下的各种搜索条件的回调事件
          @handle= "handle"  自定义弹窗的事件
          @confirmInput= "searchConfirm"  简单搜索框的回调事件
          @confirm="getMyLockdogList" 点击高级搜索的确定按钮
          ></zz-searchAd>`,

        explameMethods:
          `search (state) {
            let {type, value} = item
            this[type] = value
          }`
      }
    },
    methods: {
      search (item) {
        let {type, value} = item
        this[type] = value
      },
      searchConfirm (state) {
        this.state = state
      },
      getMyLockdogList () {
      },
      handle () {
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
